<!-- 时间组件-季度选择 -->
<template>
  <div class="time-season-select">
    <mark v-show="showSeason" class="_mark" @click.stop="showSeason = false" />
    <el-input
      v-model="showValue"
      placeholder="请选择季度"
      style="width:12.7rem;"
      @focus="showSeason = true"
      @change="inputChange"
    >
      <i slot="prefix" class="el-input__icon el-icon-date" />
    </el-input>
    <el-card v-show="showSeason" class="box-card">
      <div slot="header" class="clearfix yearBtn">
        <button
          type="button"
          aria-label="前一年"
          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prev"
        />
        <span role="button" class="el-date-picker__header-label"
          >{{ year }}年</span
        >
        <button
          type="button"
          aria-label="后一年"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
          @click="next"
        />
      </div>
      <div class="text item">
        <el-button
          type="text"
          size="medium"
          class="_left"
          @click="selectSeason(0)"
          >第一季度</el-button
        >
        <el-button
          type="text"
          size="medium"
          class="_right"
          @click="selectSeason(1)"
          >第二季度</el-button
        >
      </div>
      <div class="text item">
        <el-button
          type="text"
          size="medium"
          class="_left"
          @click="selectSeason(2)"
          >第三季度</el-button
        >
        <el-button
          type="text"
          size="medium"
          class="_right"
          @click="selectSeason(3)"
          >第四季度</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {
    valueArr: {
      default: () => {
        return ["01-03", "04-06", "07-09", "10-12"];
      },
      type: Array,
    },
    getValue: {
      default: () => {},
      type: Function,
    },
    defaultValue: {
      default: "",
      type: String,
    },
    prop: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      showSeason: false,
      season: "",
      year: new Date().getFullYear(),
      showValue: "",
      showValue1: "",
    };
  },
  watch: {
    defaultValue: function(value, oldValue) {
      const arr = value.split("-");
      this.year = arr[0].slice(0, 4);
      const str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
      const arrAll = this.valueArr;
      this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
    },
  },
  created() {
    if (this.defaultValue) {
      const value = this.defaultValue;
      const arr = value.split("-");
      this.year = arr[0].slice(0, 4);
      const str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
      const arrAll = this.valueArr;
      this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
    }
  },
  methods: {
    one() {
      this.showSeason = false;
    },
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      this.year = this.year * 1 + 1;
    },
    selectSeason(i) {
      const that = this;
      that.season = i + 1;
      const arr = that.valueArr[i].split("-");
      that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
      that.showSeason = false;
      this.showValue = `${this.year}年${this.season}季度`;
      this.showValue1 = `${this.year}-${this.season}`;
      this.$emit("seasonChange", {
        showValue: this.showValue1,
        prop: this.prop,
      });
      console.log(this.showValue);
    },
    getLastDay(year, month) {
      var new_year = year; // 取当前的年份
      var new_month = month++; // 取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12) {
        new_month -= 12; // 月份减
        new_year++; // 年份增
      }
      var new_date = new Date(new_year, new_month, 1); // 取当年当月中的第一天
      return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); // 获取当月最后一天日期
    },
    inputChange(e) {
      // console.log(e,'eeee');
      this.$emit("seasonChange", {
        showValue: e,
        prop: this.prop,
      });
    },
  },
};
</script>
<style scoped></style>
